<template>

  <div class="img">
    <p class="imgtitle">{{ title }}</p>
    <div class="imgg" :style="{ 'width': imageWidth }">
      <el-image ref="img" :src="imgUrl" />
      <template v-if="show && type==='point'">
        <span v-for="(item,index) in pointss" :key="index" class="point" :style="{ 'left': item.left+ 'px', 'bottom': item.bottom+ 'px' }" />
      </template>

      <template v-if="show && type==='line'">
        <span v-for="(item,index) in pointss" :key="index" class="point" :style="{ 'left': item.left + 'px', 'bottom': item.bottom+ 'px' }" />
        <svg :style="{height:svg.height,width:svg.width}">
          <polyline :points="svgLine" :style="{fill:'none',stroke:'green','stroke-width':1}" />
        </svg>
      </template>
    </div>

  </div>

</template>

<script>
import { getImgSize, getPositionPercent } from '@/utils/report/gongju.js'
export default {
  props: {
    // 图片url
    imgUrl: {
      type: String,
      default: 'https://robot-test-cdn1.91hiwork.com//upload/mapImg/XJ-0001hs.png'
    },
    // 点数组
    pointsPosition: {
      type: Array,
      default: () => {
        return [
          // {
          //   x: 50,
          //   y: 50
          // },
          // {
          //   x: 100,
          //   y: 100
          // },
          // {
          //   x: 200,
          //   y: 200
          // },
          // {
          //   x: 40,
          //   y: 200
          // }
        ]
      }
    },
    // 类型
    type: {
      type: String,
      default: 'point'
    },
    // 标题
    title: {
      type: String,
      default: '地图'
    },
    // 图片宽度
    imageWidth: {
      type: String,
      default: '200px'
    }
  },
  data() {
    return {
      pointss: [],
      points: [
        // left: '0',
        // bottom: '0'
      ],
      show: false,
      // 地图图片locationX locationY
      position: {
        x: 50,
        y: 50
      },
      textlist3: [],
      svg: {
        height: '',
        width: ''
      },
      svgLine: '18,173 37.494,154.5024 75.006,117.0048 112.5,79.50720000000001  100,20 18,173'
    }
  },
  computed: {

  },
  watch: {
    svg: {
      handler: function(val, oldVal) {
        this.getSize(this.points)
        this.b()
        this.svg = val
      },
      deep: true
    },
    pointsPosition: {
      handler: function(val, oldVal) {
        this.a()
      },
      deep: true
    }
  },
  created() {
  },
  mounted() {

  },
  methods: {
    a() {
      const _this = this
      this.$nextTick(() => {
        setTimeout(() => {
          _this.svg.width = this.$refs.img.$el.offsetWidth
          _this.svg.height = _this.$refs.img.$el.offsetHeight
        }, 0)
      })
      this.getImgSize(this.imgUrl)
    },
    async getImgSize(imgUrl) {
      const data = await getImgSize(imgUrl)
      const arr = this.pointsPosition
      const a = []
      for (const item of arr) {
        //
        const b = getPositionPercent(data.width, data.height, item.x, item.y)
        a.push(b)
      }
      this.points = a
      this.pointss = JSON.parse(JSON.stringify(a))
      this.show = true
    },
    b() {
      for (const item of this.pointss) {
        item.left = (this.toPoint(item.left) * this.svg.width) - 5
        item.bottom = (this.toPoint(item.bottom) * this.svg.height) - 5
      }
    },
    getSize(points) {
      // let first = ''

      let i = 1
      let svgLine = ''
      for (const item of points) {
        const x = this.toPoint(item.left)
        const showWidth = x * this.svg.width
        const y = this.toPoint(item.bottom)
        const showHeight = this.svg.height - (y * this.svg.height)
        svgLine += `${showWidth},${showHeight} `
        if (i === 1) {
          // first = `${showWidth},${showHeight} `
        }
        i++
      }
      this.svgLine = svgLine

      //
    },
    toPoint(percent) {
      var str = percent.replace("%", "")
      str = str / 100
      return str
    }
  }
}
</script>

<style lang="scss" scoped>
.img {
  height: auto;
  width: auto;
  display: inline-block;
  .imgtitle {
    height: 30px;
    line-height: 30px;
    text-align: center;
    // background-color: red;
    padding: 0;
    margin: 0;
    font-size: 16px;
    font-weight: 700;
  }
  .imgg {
    // height: calc(100% - 30px);
    height: auto;
    width: 100%;
    position: relative;
    .point{
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: green;
      position: absolute;
    }
    .el-image{
      overflow: inherit;
    }
  }
  svg {

      position: absolute;
      top: 0;
      left: 0;
    }
}
</style>
